<template>
  <el-dialog :close-on-click-modal="false" :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="form.name" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="设备编码" prop="code">
        <el-input v-model="form.code" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="是否启用" prop="enabled">
        <el-select v-model="form.enabled" placeholder="请选择">
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备地址" prop="address">
        <el-input v-model="form.address" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="坐标" prop="locations">
        <el-input v-model="form.locations" disabled type="text" placeholder="请选择"></el-input>
        <MapMarker ref="MapMarker" :isClick="true" @change="onChangeMap" style="margin-top:10px;"></MapMarker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import MapMarker from "@/components/MapMarker";
import { cardAdd, cardEdit } from "@/api/card";

export default {
    components: {MapMarker},
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: {},
    },
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {};
      },
      immediate: true,
    },
    show: {
      handler(val) {
        val && this.resetForm("form");
        val && this.$nextTick((_) => {
          if (val) {
            this.$refs["MapMarker"].initMap(_=>{
                if(this.form.locations) {
                    this.$refs["MapMarker"].addMarker(this.form.locations)
                }
            });
          } else {
            this.$refs["MapMarker"] && this.$refs["MapMarker"].clearMarker();
          }
        });
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {},
      rules: {
        code: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["change", "input"],
          },
        ],
      },
    };
  },
  methods: {
    groupChange(e) {
      this.form.groupName = e.name;
      this.form.groupPath = e.path;
    },
    submit() {
      // console.log('打印当前编辑：', this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            cardEdit(this.form).then((res) => {
              // 验证成功-编辑
              this.$emit("change", this.form);
              this.close();
            });
          } else {
            cardAdd(this.form).then((res) => {
              // 验证成功-新增
              this.$emit("change", this.form);
              this.close();
            });
          }
        }
      });
    },
    close() {
      this.form = {};
      this.$emit("update:show", false);
    },
    onChangeMap(location) {
      this.$set(this.form, "locations", location);
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
}
</style>
